import { useState, useEffect } from 'react';
import './index.css';
import { NavBar, Input, Button,Toast } from 'react-vant';
import { useNavigate } from 'react-router-dom';
// import axios from 'axios';
import { api } from '../../luyou/index'
export default function Updatepassword() {
    const naviate = useNavigate();
    let [tel, settel] = useState('');
    let [value, setvalue] = useState('');
    let [flag, setflag] = useState(false);
    let [flag2, setflag2] = useState(false);
    let [flag3, setflag3] = useState(false);
    let [flag4, setflag4] = useState(false);
    // 将timer提升到组件的状态中，方便在其他地方操作（比如清除定时器）
    let [time, settime] = useState(60);
    let [flag5, setflag5] = useState(false);
    let [yan,setyan]=useState('')

    let telyan = () => {
        if (tel.length === 0) {
            setflag(true);
        } else {
            if (tel.length === 11) {
                setflag2(false);
            } else {
                setflag2(true);
            }
            setflag(false);
        }
    };

    let valueyan = () => {
        if (value.length === 0) {
            setflag3(true);
        } else {
            if (value.length === 6) {
                setflag4(false);
            } else {
                setflag4(true);
            }
            setflag3(false);
        }
    };

    let yanzheng=async()=>{
      let {data}=await api.post('/get_sms',{phone:tel})
      console.log(data)
      if(data.code===200){
        Toast.success('发送成功')
        setyan(data.sms)
      }else{
        Toast.fail('发送失败')
      }
    }
    let send = () => {
       if(tel.length===11){
          let timer=setInterval(()=>{
             settime(time--);
             setflag5(true);
             if(time===50){
               yanzheng()
             }
             if(time===0){
               clearInterval(timer);
               setflag5(false);
                settime(60);
             }
          },1000)
       }
    };
    let diao=()=>{
      if(value===yan){
        Toast.success('验证成功')
        naviate('/up?id='+tel)
      }else{
        Toast.fail('验证失败')
      }
    }
    

    return (
        <div>
            <NavBar
                title="忘记密码"
                onClickLeft={() => naviate('/')}
            />
            <div className='U_box'>
                <div style={{ height: '30px', borderBottom: '1px solid #ccc' }}>
                    <Input
                        value={tel}
                        type='tel'
                        onChange={tel => { settel(tel) }}
                        placeholder='请输入手机号'
                        onBlur={() => { telyan() }}
                    />
                </div>
                <span className={flag? 'U_xian' : 'U_xiao'}>请输入手机号</span>
                <span className={flag2? 'U_xian' : 'U_xiao'}>请输入正确的手机号</span>
                <div>
                    <Input
                        prefix="💁"
                        suffix={<Button size="small" onClick={send} type="primary">{flag5? `${time}秒后重新获取` : '获取验证码'}</Button>}
                        placeholder="请输入短信验证码"
                        onChange={value => { setvalue(value) }}
                        onBlur={() => { valueyan() }}
                    />
                </div>
                <span className={flag3? 'U_xian' : 'U_xiao'}>请输入短信验证码</span>
                <span className={flag4? 'U_xian' : 'U_xiao'}>请输入正确的短信验证码</span>
                <Button onClick={() => diao()} style={{ width: '2rem', height: '0.5rem', marginTop: '0.1rem', backgroundColor: '#ff2630', color: 'white', borderRadius: '0.4rem' }}>下一步</Button>
            </div>
        </div>
    );
}